<template>
  <div class="discover-detail">
    <el-header class="detail-header">
      <el-button
        type="text"
        class="back-btn"
        @click="$emit('back')"
      >
        <el-icon><ArrowLeft /></el-icon>
        返回
      </el-button>
      <h2>{{ currentItem?.name }}</h2>
    </el-header>

    <el-scrollbar class="detail-content">
      <!-- 全部收藏 -->
      <div v-if="currentItem?.id === 1" class="collection-container">
        <div class="collection-item" v-for="item in collections" :key="item.id">
          <div class="collection-content">
            <h3>{{ item.title }}</h3>
            <p class="desc">{{ item.desc }}</p>
            <p class="source">{{ item.source }}</p>
          </div>
          <el-icon class="more-icon"><More /></el-icon>
        </div>
      </div>

      <!-- 最近使用 -->
      <div v-else-if="currentItem?.id === 2" class="recent-container">
        <div class="recent-item" v-for="item in recentItems" :key="item.id">
          <el-avatar :size="40" :src="item.avatar" />
          <div class="recent-info">
            <h4>{{ item.name }}</h4>
            <p>{{ item.desc }}</p>
          </div>
          <span class="time">{{ item.time }}</span>
        </div>
      </div>

      <!-- 其他内容类型 -->
      <div v-else class="default-content">
        <el-empty :description="`暂无${currentItem?.name}内容`" />
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ArrowLeft, More } from '@element-plus/icons-vue'

const props = defineProps({
  itemId: {
    type: Number,
    default: null
  }
})

defineEmits(['back'])

const discoverItems = [
  { id: 1, name: '全部收藏', icon: 'Picture' },
  { id: 2, name: '最近使用', icon: 'Shop' },
  { id: 3, name: '链接', icon: 'VideoCamera' },
  { id: 4, name: '图片与视频', icon: 'CollectionTag' },
  { id: 5, name: '文件', icon: 'Picture' },
  { id: 6, name: '聊天记录', icon: 'Shop' },
  { id: 7, name: '语言', icon: 'VideoCamera' },
  { id: 8, name: '标签', icon: 'CollectionTag' }
]

// 当前显示的项目
const currentItem = computed(() =>
  discoverItems.find(item => item.id === props.itemId)
)

// 模拟数据 - 全部收藏
const collections = ref([
  {
    id: 1,
    title: '飞猪订酒店机票火车租车门票',
    desc: '陌上倾城落蝶雨',
    source: 'https://www.polebrief.com/index'
  },
  {
    id: 2,
    title: '前端学习资料总导航',
    desc: '飞书云文档',
    source: 'https://y03l2iufsb1.feishu.cn/wiki/RDZIw5Atoi7MyrkZPFocMB8nnVg'
  },
  {
    id: 3,
    title: '张家口万达中合大数据有限公司招聘',
    desc: '为满足企业发展实际需求，获取高质量人才，提高企业竞争力，根据具体工作需...',
    source: '小樱老师-印客学院'
  }
])

// 模拟数据 - 最近使用
const recentItems = ref([
  {
    id: 1,
    name: '大美张北',
    desc: '陌上倾城落蝶雨',
    time: '昨天',
    avatar: 'https://picsum.photos/40/40?random=1'
  },
  {
    id: 2,
    name: 'CET6_202206（第一套）',
    desc: '这段音频很精彩，赶紧来听听吧！',
    time: '前天',
    avatar: 'https://picsum.photos/40/40?random=2'
  }
])
</script>

<style lang="scss" scoped>
.discover-detail {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;

  .detail-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e6e6e6;
    padding: 0 20px;
    height: 60px;

    .back-btn {
      margin-right: 20px;
      display: flex;
      align-items: center;

      .el-icon {
        margin-right: 5px;
      }
    }

    h2 {
      margin: 0;
      font-size: 18px;
    }
  }

  .detail-content {
    flex: 1;
    padding: 20px;

    .collection-container {
      .collection-item {
        display: flex;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        transition: background-color 0.3s;

        &:hover {
          background-color: #f5f5f5;
        }

        .collection-content {
          flex: 1;

          h3 {
            margin: 0 0 8px 0;
            font-size: 16px;
          }

          .desc {
            margin: 0 0 5px 0;
            color: #666;
            font-size: 14px;
          }

          .source {
            margin: 0;
            color: #999;
            font-size: 12px;
          }
        }

        .more-icon {
          color: #999;
        }
      }
    }

    .recent-container {
      .recent-item {
        display: flex;
        align-items: center;
        padding: 12px 15px;
        border-bottom: 1px solid #f0f0f0;

        .el-avatar {
          margin-right: 15px;
        }

        .recent-info {
          flex: 1;

          h4 {
            margin: 0 0 5px 0;
            font-size: 15px;
          }

          p {
            margin: 0;
            color: #666;
            font-size: 13px;
          }
        }

        .time {
          color: #999;
          font-size: 12px;
        }
      }
    }

    .default-content {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
